
<template>
    <div class="system-systemUserdmin-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">

            <div class="table-search-container">
                <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="用户名">
                                <el-input v-model="state.ruleForm.userName" style="width: 100%" placeholder="用户名，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="角色">
                                <el-select clearable v-model="state.ruleForm.roleId" placeholder="请选择角色" style="width: 100%">
                                    <el-option v-for="i in state.roleList" :label="i.roleName" :value="i.roleId" :key="i.roleCode"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" >
                            <el-form-item label="用户类型">
                                <el-select v-model="state.ruleForm.userType" placeholder="用户类型查询" clearable :multiple="true" class="input-width" style="width: 100%">
                                    <el-option v-for="item in state.userType" :key="item.dicItemValue" :label="item.dicItemName"
                                        :value="item.dicItemValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="状态">
                                <el-select v-model="state.ruleForm.status" placeholder="状态查询" clearable :multiple="true" class="input-width" style="width: 100%">
                                    <el-option v-for="item in state.statusList" :key="item.dicItemValue" :label="item.dicItemName"
                                        :value="item.dicItemValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>



                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                    <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                    <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                </div>
                                <div>
                                    <el-button size="default" type="primary" @click="refresh()">查询
                                    </el-button>
                                    <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                    </el-button>
                                    <el-button type="primary" size="default" @click="handleAdd()">添加用户</el-button>

                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-card shadow="hover" class="layout-padding-auto">
                <el-table size="default" :data="state.tableData" style="width: 100%">
                    <el-table-column label="用户名" prop="userName" show-overflow-tooltip></el-table-column>
                    <el-table-column label="邮箱" prop="email" show-overflow-tooltip></el-table-column>
                    <el-table-column label="全名" prop="fullName" show-overflow-tooltip></el-table-column>
                    <el-table-column label="默认角色" prop="defaultRole" show-overflow-tooltip></el-table-column>
                    <el-table-column label="创建人" prop="createBy" show-overflow-tooltip></el-table-column>

                    <el-table-column label="用户类型" prop="userType">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'"> {{
                                getDic("userType", scope.row.userType)
                            }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="注册来源" prop="userRegistSource">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'"> {{
                                getDic("userRegisterSource", scope.row.userRegistSource)
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
                                getStatus(scope.row.status)
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createDate" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新人" prop="updateBy" show-overflow-tooltip></el-table-column>
                    <el-table-column label="更新时间" prop="updateDate" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.updateDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户操作" width="180">
                        <template #default="scope">
                            <el-button-group>
                                <el-button size="default" type="primary" @click="handlerEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="default" type="primary"
                                    @click.native.prevent="handleAdminDisableOrEnableUser(scope.row, scope.$index, scope.row.status)">{{
                                        scope.row.status > 0 ?
                                        "禁用用户" : "启用用户"
                                    }}</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="数据权限操作" width="200">
                        <template #default="scope">
                            <el-button-group>
                                <el-button size="default" type="primary" @click="handlerEdit2(scope.$index, scope.row)">配置权限</el-button>
                                <el-button size="default" type="primary" @click="handleUserDimensionView(scope.row, scope.$index)">查看权限</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="重置操作" width="200">
                        <template #default="scope">
                            <el-button-group>
                                <el-button size="default" type="primary" @click="handleResetPassword(scope.row)">重置密码</el-button>
                                <el-button @click="handleResetGoogleBindFlag(scope.row)" size="default" type="primary">重置谷歌</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>


                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]"
                v-model:current-page="state.ruleForm.page" background v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>
        </el-card>


        <editdialog ref="editdialogRef" @refresh="refresh" />

        <userDataDimensionViewDialog ref="userDataDimensionViewDialogRef" />

        <userDataDimensionEditDialog ref="userDataDimensionEditDialogRef" />

    </div>
</template>

<script setup lang="ts" name="systemUserdmin">

import { formatDate } from './../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
// 导入接口
import { useSysApi } from "../../../api/sys";



// 引入组件
const userDataDimensionViewDialog = defineAsyncComponent(() => import('./userDataDimensionView.vue'));
const userDataDimensionViewDialogRef = ref();

const editdialog = defineAsyncComponent(() => import('./editdialog.vue'));
const editdialogRef = ref();


const userDataDimensionEditDialog = defineAsyncComponent(() => import('./userDataDimensionEdit.vue'));
const userDataDimensionEditDialogRef = ref();



const state = reactive({
    isToggle: false,
    tableData: [],
    roleList: [] as any,
    statusList: [] as any,
    userRegisterSource: [] as any,
    userType: [] as any,
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        roleId: "",
        userName: "",
        status: [],
        userType: ["admin","virtual"],
    },
});


const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        roleId: "",
        userName: "",
        status: [],
        userType: ["admin","virtual"],
    };
    queryDynamicSqlPaged();
}


const refresh = () => {
    queryDynamicSqlPaged();
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    queryDynamicSqlPaged();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    queryDynamicSqlPaged();
};


const handleAdminDisableOrEnableUser = async (row: any, index: any, status: any) => {
    try {
        if (status > 0) {
            // 需要禁用
            await useSysApi().disabledUserFrame(row.id);
            row.status = -1;
            ElMessage.success("禁用用户成功");
        } else {
            // 需要启动
            await useSysApi().enabledUserFrame(row.id);
            row.status = 1;
            ElMessage.success("启用用户成功");
        }
    } catch (error: any) {
        ElMessage.error("操作失败请稍后再试");
    }
}


const handleResetPassword = async (row: any) => {
    try {
        await useSysApi().resetPasswordFrameUser(row.id);
        ElMessage.success("密码重置成功");
        queryDynamicSqlPaged();
    } catch (error: any) {
        ElMessage.error("操作失败请稍后再试");
    }
}

const handleResetGoogleBindFlag = async (row: any) => {
    try {
        await useSysApi().resetGoogleBindFlag(row.id);
        ElMessage.success("重置谷歌验证成功");
        queryDynamicSqlPaged();
    } catch (error: any) {
        ElMessage.error("操作失败请稍后再试");
    }
}

const queryDynamicSqlPaged = async () => {
    try {
        let vo = {
            params: {
                status: state.ruleForm.status,
                userType: state.ruleForm.userType
            } as any,
            sorts: "user_name"
        };
        if (state.ruleForm.roleId) vo["params"]["roleId"] = state.ruleForm.roleId;
        if (state.ruleForm.userName) vo["params"]["userName"] = state.ruleForm.userName;

        let listTemp = await useSysApi().queryDynamicSqlPaged(
            "3efa00c2c4b06b73758fac9e95e9b6a9",
            state.ruleForm.page,
            state.ruleForm.limit,
            vo
        );
        state.ruleForm.total = listTemp.total;
        state.tableData = listTemp.list;
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


const selectDicItemsByDicCode = async () => {
    state.statusList = await useSysApi().selectDicItemsByDicCode("userStatus", "COMMON-SERVICE");

    state.userRegisterSource = await useSysApi().selectDicItemsByDicCode("userRegisterSource");
    state.userType = await useSysApi().selectDicItemsByDicCode("userType");

    let tempList = await useSysApi().queryDynamicSqlPaged("fca0c2236325f81017b12e4da4d32990", 1, 10, {});
    state.roleList = tempList.list;
}


const handleAdd = () => {
    editdialogRef.value.openDialog("add");
}

const handlerEdit = (index: any, row: any) => {
    editdialogRef.value.openDialog("edit", row);
}

const handlerEdit2 = (index: any, row: any) => {
    userDataDimensionEditDialogRef.value.openDialog(row);
}





const handleUserDimensionView = (row: any, index: any) => {
    userDataDimensionViewDialogRef.value.openDialog(row);
}



const getDic = (obj: any, str: string) => {
    let strTemp = str;

    state[obj.toString()].forEach((element: any) => {
        if (element.dicItemValue == str) {
            strTemp = element.dicItemName;
        }
    });
    return strTemp;
}




const getStatus = (str: string) => {
    let strTemp = str;
    state.statusList.forEach((element: any) => {
        if (element.dicItemValue == str) {
            strTemp = element.dicItemName;
        }
    });
    return strTemp;
}



// 页面加载时
onMounted(() => {
    selectDicItemsByDicCode();
    // 获取字典状态编码
    queryDynamicSqlPaged();
});




</script>




<style scoped lang="scss">
// .el-form .el-form-item:last-of-type {
//     margin-bottom: 22px !important;
// }

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}


.system-systemUserdmin-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}

.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
